appDisplay: Rework indicators animation

Previously the animation was not entirely according to the mockup.
Now we are closer to the mockup.

The padding for the indicators are decremented, since we need that
to make the animation not too quick. As a drawback, maybe visually
is not as good as before, or the area to click dots is too much little.
Just make that change for now and test it widely, and we can change
that after.

https://bugzilla.gnome.org/show_bug.cgi?id=707565

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4f738114babbb9f3458ca3a0c7f915972364962e..15f91ef87a8508990646880cb196411b2c69af28 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -941,7 +941,7 @@ StScrollBar StButton#vhandle:active {
 }
 
 .page-indicator {
-    padding: 15px 30px;
+    padding: 15px 20px;
 }
 
 .page-indicator .page-indicator-icon {

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 262b46a9396a09592d73ca3033ab6d47851d4c01..52d7b70ae1e59c98f0aef912da2f880623fb66f1 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -39,12 +39,9 @@ const FOLDER_SUBICON_FRACTION = .4;
 
 const MIN_FREQUENT_APPS_COUNT = 3;
 
-const INDICATORS_ANIMATION_TIME = 0.5;
-// 100% means indicators wait for be animated until the previous one
-// is animated completely. 0% means all animators are animated
-// at once without delay
-const INDICATORS_ANIMATION_DELAY_PERCENTAGE = 50;
-
+const INDICATORS_BASE_TIME = 0.25;
+const INDICATORS_ANIMATION_DELAY = 0.125;
+const INDICATORS_ANIMATION_MAX_TIME = 0.75;
 // Fraction of page height the finger or mouse must reach
 // to change page
 const PAGE_SWITCH_TRESHOLD = 0.2;
@@ -230,22 +227,23 @@ const PageIndicators = new Lang.Class({
         if (children.length == 0)
             return;
 
-        let timePerChild = INDICATORS_ANIMATION_TIME / this._nPages;
-        let delay = INDICATORS_ANIMATION_DELAY_PERCENTAGE / 100 * timePerChild;
-
         let offset;
         if (this.actor.get_text_direction() == Clutter.TextDirection.RTL)
             offset = -children[0].width;
         else
             offset = children[0].width;
 
+        let delay = INDICATORS_ANIMATION_DELAY;
+        let totalAnimationTime = INDICATORS_BASE_TIME + INDICATORS_ANIMATION_DELAY * this._nPages;
+        if (totalAnimationTime > INDICATORS_ANIMATION_MAX_TIME)
+            delay -= (totalAnimationTime - INDICATORS_ANIMATION_MAX_TIME) / this._nPages;
+
         for (let i = 0; i < this._nPages; i++) {
             children[i].translation_x = offset;
             Tweener.addTween(children[i],
                              { translation_x: 0,
-                               time: timePerChild,
-                               delay: delay * i,
-                               transition: 'easeOutQuad'
+                               time: INDICATORS_BASE_TIME + delay * i,
+                               transition: 'easeInOutQuad'
                              });
         }
     }